<template>
  <div>
    <div class="collection-tab">
      <button-tab>
        <button-tab-item selected @on-item-click="onItemClick">供应</button-tab-item>
        <button-tab-item @on-item-click="onItemClick">求购</button-tab-item>
      </button-tab>
    </div>
    <div class="tab-item" v-show="nowIndex===0">
    	<div class="edit-wrapper">
    		<div class="edit" v-show="supplyeditshow" @click="supplyedit">编辑</div>
    		<div class="done" v-show="supplydoneshow" @click="supplydone">完成</div>
    	</div>
    	<div class="cellection-supply-list">
    		<div class="supply-list-item vux-1px-b" v-for="(supply,index) in celltionsupplyList">
    			<div class="celltion-check" v-show="supplycheckshow">
    				<input type="checkbox" :value="supply.id" v-model="supplychecked"/>
    			</div>
				<a class="collection-tab-a" :href="'#/trade/supply/' + supply.id ">
					<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + supply.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="supply.img.length>1">多图</label></div>
					<div class="item-ifo">
						<div class="ifo-wrap">
							<div class="ifo-wrap-cell">
								<div class="goods-msg clearfix">
									<div class="goods-name ellipsis-2">
										<i class="pre-label" v-show="supply.sale_type==2">预售</i>
										<span class="name">{{supply.kind_name}}{{supply.title}}</span>
									</div>
									<div class="goods-price">
										<div class="pre-date ellipsis" v-if="supply.sale_type==2">
											<span class="pre-time ellipsis">{{supply.sale_pre.month}}月{{supply.sale_pre.day}}上市</span>
										</div>
										<div class="price" v-else>
											<label v-if="supply.price_type==2" class="face">面议</label>
											<label v-else><big>{{supply.price}}</big>元/{{supply.price_unit_name}}</label>
										</div>
									</div>
								</div>
								<div class="goods-from">
									<div class="goods-address ellipsis">
										<i class="address-icon"></i>
										<span>{{supply.province_name}}</span>
										<span>{{supply.city_name}}</span>
									</div>
									<div class="goods-size">
										<label <label v-if="supply.size_unit_name">
											<span>{{supply.size_min}}-{{supply.size_max}}{{supply.size_unit_name}}</span>
										</label>
										<label v-else>规格不限</label>
									</div>
								</div>
								<div class="goods-seller">
									<div class="seller">
										<label class="name ellipsis">
											<span v-if="supply.verify_classify" >{{supply.verify_name}}</span>
											<span v-else>{{supply.contact_name}}</span>
										</label>
										<span class="verify-type firm-jxs" v-if="supply.verify_classify==2&&supply.verify_type==3"></span>
										<span class="verify-type firm-pfs" v-if="supply.verify_classify==2&&supply.verify_type==13"></span>
										<span class="verify-type own-jxs" v-if="supply.verify_classify==1&&supply.verify_type==3"></span>
										<span class="verify-type own-pfs" v-if="supply.verify_classify==1&&supply.verify_type==13"></span>
										<span class="verify-type own-yf" v-if="supply.verify_classify==1&&supply.verify_type==12"></span>
										<span class="verify-type own-ywy" v-if="supply.verify_classify==1&&supply.verify_type==2"></span>
										<span class="verify-type own-yzh" v-if="supply.verify_classify==1&&supply.verify_type==4"></span>
										<span class="verify-type own-yzj" v-if="supply.verify_classify==1&&supply.verify_type==11"></span>
									</div>
									<div class="data ellipsis">{{supply.updated_view}}</div>
								</div>
							</div>
						</div>
					</div>
				</a>
			</div>
    	</div>
    	<div class="delete-wrapper" v-show="supplydeteleshow">
    		<div class="check-all" @click="supplycheckall">
    			<span>全选</span>
    		</div>
    		<div class="detele-button" @click="removeSupply">删除</div>
    	</div>
    </div>
    <div class="tab-item" v-show="nowIndex===1">
    	<div class="edit-wrapper">
    		<div class="edit" v-show="demandeditshow" @click="demandedit">编辑</div>
    		<div class="done" v-show="demanddoneshow" @click="demanddone">完成</div>
    	</div>
    	<div class="cellection-demand-list">
    		<div class="demand-list-item vux-1px-b" v-for="(demand,index) in celltiondemandList">
    			<div class="celltion-check" v-show="demandcheckshow">
    				<input type="checkbox" :value="demand.id" v-model="demandchecked"/>
    			</div>
				<a class="collection-tab-a" :href="'#/trade/demand/' + demand.id ">
  					<div class="buy-wraper line-one">
  						<div class="buy-name ellipsis">{{demand.kind_name}}</div>
  						<div class="buy-stone ellipsis">求购：<big>{{demand.stock}}</big><span>斤</span></div>
  					</div>
  					<div class="buy-wraper line-two">
  						<div class="buy-address ellipsis">
  							<label class="address-wrapper ellipsis">
	  							<i class="address-icon"></i>
								<span>{{demand.province_name}}</span>
								<span>{{demand.city_name}}</span>
							</label>
							<label class="wl" v-show="demand.logistics===1">
								<i class="wl-car"></i>
								<span>物流</span>
							</label>
  						</div>
  						<div class="buy-size ellipsis">规格：
  							<label v-if="demand.size_unit_name"><span>{{demand.size_min}}</span>-<span>{{demand.size_max}}</span><span>{{demand.size_unit_name}}</span></label>
  							<label v-else>不限</label>
  						</div>
  					</div>
  					<div class="buy-wraper line-three">
  						<div class="buy-autor">
  							<span class="name ellipsis"><span v-if="demand.verify_classify" v-text="demand.verify_name"></span><span v-else v-text="demand.contact_name"></span></span>
								<span class="verify-type firm-jxs" v-if="demand.verify_classify==2&&demand.verify_type==3"></span>
								<span class="verify-type firm-pfs" v-if="demand.verify_classify==2&&demand.verify_type==13"></span>
								<span class="verify-type own-jxs" v-if="demand.verify_classify==1&&demand.verify_type==3"></span>
								<span class="verify-type own-pfs" v-if="demand.verify_classify==1&&demand.verify_type==13"></span>
								<span class="verify-type own-yf" v-if="demand.verify_classify==1&&demand.verify_type==12"></span>
								<span class="verify-type own-ywy" v-if="demand.verify_classify==1&&demand.verify_type==2"></span>
								<span class="verify-type own-yzh" v-if="demand.verify_classify==1&&demand.verify_type==4"></span>
								<span class="verify-type own-yzj" v-if="demand.verify_classify==1&&demand.verify_type==11"></span>
  						</div>
  						<div class="buy-time ellipsis">{{demand.updated_view}}</div>
  					</div>
  					<div class="buy-requirement ellipsis" v-if="demand.desc_tag.length || demand.desc">
  						具体要求：
						<span v-for="tab in demand.desc_tag">{{tab}}</span>
						<label>{{demand.desc}}</label>
  					</div>
  				</a>
			</div>
    	</div>
    	<div class="delete-wrapper" v-show="demanddeteleshow">
    		<div class="check-all" @click="demandcheckall">
    			<span>全选</span>
    		</div>
    		<div class="detele-button" @click="removeDemand">删除</div>
    	</div>
    </div>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem} from 'vux'
export default {
	data () {
	    return {
	      demo01: 0,
	      nowIndex:0,
	      celltionsupplyList:[],
	      celltiondemandList:[],
	      supplyeditshow:true,
	      supplydoneshow:false,
	      demandeditshow:true,
	      demanddoneshow:false,
	      supplycheckshow:false,
	      demandcheckshow:false,
	      supplydeteleshow:false,
	      demanddeteleshow:false,
	      supplychecked:[],
	      demandchecked:[],
	      supplyallcheck:false,
	      demandallcheck:false,
	    }
	 },
  components: {
    ButtonTab,
    ButtonTabItem
  },
  methods: {
    onItemClick(index) {
     this.nowIndex = index
    },
    supplyedit(){
    	this.supplyeditshow=false;
    	this.supplydoneshow=true;
    	this.supplycheckshow=true;
    	this.supplydeteleshow=true;
    },
    supplydone(){
    	this.supplyeditshow=true;
    	this.supplydoneshow=false;
    	this.supplycheckshow=false;
    	this.supplydeteleshow=false;
    },
    demandedit(){
    	this.demandeditshow=false;
    	this.demanddoneshow=true;
    	this.demandcheckshow=true;
    	this.demanddeteleshow=true;
    },
    demanddone(){
    	this.demandeditshow=true;
    	this.demanddoneshow=false;
    	this.demandcheckshow=false;
    	this.demanddeteleshow=false;
    },
    supplycheckall(){
    	this.supplyallcheck=!this.supplyallcheck;
    	if(this.supplyallcheck){
	    		this.supplychecked = this.celltionsupplyList.map(v=>{
	    		return v.id
	    		})
	    	}else{
	    		this.supplychecked =[]
	    	}
    },
    demandcheckall(){
    	this.demandallcheck=!this.demandallcheck;
    	if(this.demandallcheck){
	    		this.demandchecked = this.celltiondemandList.map(v=>{
	    		return v.id
	    		})
	    	}else{
	    		this.demandchecked =[]
	    	}
    },
    removeSupply(){
    	let data = {ids : this.supplychecked}
			axios.post('/api/trade/supply/deleteCollection',qs.stringify(data)).then( response=>{
				axios.get('/api/trade/supply/getCollectionList').then(response => {
					this.celltionsupplyList = response.data.resp_data.data;
				})
			})	
    },
    removeDemand(){
    	let data = {ids : this.demandchecked}
			axios.post('/api/trade/demand/deleteCollection',qs.stringify(data)).then( response=>{
				axios.get('/api/trade/demand/getCollectionList').then(response => {
					this.celltiondemandList = response.data.resp_data.data;
				})
			})	
    },
  },
  mounted() {
  	axios.get('/api/trade/supply/getCollectionList').then(response => {
		this.celltionsupplyList = response.data.resp_data.data;
	});
	axios.get('/api/trade/demand/getCollectionList').then(response => {
		this.celltiondemandList = response.data.resp_data.data;
	});
  }
}
</script>

<style scoped>
@import url("../../../styles/common/trade/trade-common.css");
#t_main{background: #fff;}
.detail-wrapper {
	width: 100%;
	background: #eee;
}
.collection-tab{width: 40%; margin: 15px auto;}
.vux-button-group > a {color:#008cf0 !important;}
.vux-button-group > a.vux-button-tab-item-first:after {
    border: 1px solid #008cf0 !important;
    color: #04BE02;
    border-top-left-radius:10px !important;
    border-bottom-left-radius:10px !important;
}
.vux-button-group > a.vux-button-tab-item-last:after {
    border-right: 1px solid #008cf0 !important;
    border-top: 1px solid #008cf0 !important;
    border-bottom: 1px solid #008cf0 !important;
    color: #04BE02;
    border-top-right-radius:10px !important;
    border-bottom-right-radius:10px !important;}
.vux-button-group > a.vux-button-tab-item-first{border-top-left-radius:5px !important;border-bottom-left-radius:5px !important;}
.vux-button-group > a.vux-button-tab-item-last {border-top-right-radius:5px !important;border-bottom-right-radius:5px !important;}
.vux-button-group > a.vux-button-group-current {background: #008cf0 !important; color: #fff !important;}
.tab-item{border-top:1px solid #eee;}
.edit-wrapper{width: 50px;height:30px;position: absolute;top:15px;right:10px;line-height: 30px;font-size: 15px;color: #999;overflow: hidden;}
.cellection-demand-list{background: #eee;}
.supply-list-item{display: flex;}
.supply-list-item .celltion-check{flex:0 0 20px;width:20px;margin-right:5px;}
.supply-list-item .celltion-check input{margin-top:40px;}
.supply-list-item .collection-tab-a{flex: 1;}
.demand-list-item{display: flex;}
.demand-list-item .celltion-check{flex:0 0 20px;width:20px;margin-right:5px;}
.demand-list-item .celltion-check input{margin-top:40px;}
.demand-list-item .collection-tab-a{flex: 1;}
.delete-wrapper{height: 50px;width:100%;display: flex;position: fixed;background: #fff; bottom: 0;left: 0;font-size:15px;line-height: 30px;border-top:1px solid #eee;}
.check-all{flex:0 0 60%; width: 60%;padding:10px;height: 30px;}
.detele-button{flex:1;text-align: center;background: #008CF0;color: #fff;padding:10px 0;}
</style>
